<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./Bootstrap4.6.1/css/bootstrap.css">
		<script src="./Bootstrap4.6.1/js/jquery.js"></script>
		<script src="./Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
		<style>
			div{
				outline: 1px red solid;
			}
			
			/* 顶部 */
			.top .sousuo input{
				border: 1px solid #d1d1d1;
				padding: 0.375rem 0.75rem;
			}
			/* 输入框获取焦点的时候 */
			.top .sousuo input:focus{
				outline: 2px solid #d1d1d1;
			}
			.top .top-nav a{
				text-decoration: none;
				margin-left: 0.5rem;
			}
			
			/* 中间 */
			.main{
				background: url("./img/adbg.png") no-repeat;
				background-size: 100% 100%;
			}
			.main .xcy{
				margin-top: 2rem;
				margin-left: 15rem;
			}
			.main .liucheng{
				text-align: right;
				margin-right: 10rem;
				margin-top: 3rem;
			}
			.main .login{
				width: 500px;
				/* margin: 10% auto; */
				background-color: #fff;
			}
			
			
			/* 覆盖BS样式时要加!important */
		</style>
	</head>
	<body>
		<div class="container top mt-3">
			<div class="row">
				<div class="col-6">
					<img class="h-100" src="./img/logo.png" alt="">
				</div>
				<div class="col-6 text-right">
					<div class="sousuo mb-4 clearfix">
						<button class="btn btn-success mr-3 ml-2 float-right">搜索</button>
						<input class="float-right" type="text" name="" id="" placeholder="请输入要搜索的内容">
					</div>
					<div class="top-nav">
						<a href="">首页</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="row ">
				<div class="col-6">
					<div class="xcy"><img src="./img/xcy.png" alt=""></div>
					<div class="liucheng"><img src="./img/liucheng.png" alt=""></div>
				</div>
				<div class="col-6 ">
					<form action="" class="login d-inline align-middle">
						<div><input type="text"></div>
						<div><input type="text"></div>
						<div><input type="text"></div>
						<div><input type="text"></div>
						<div><input type="text"></div>
						<div><input type="text"></div>
					</form>
					<!-- <img class="align-middle" src="./img/liucheng.png" alt=""> -->
				</div>
			</div>
		</div>
		<div class="buttom">底部</div>
	</body>
</html>